<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,user-scalable=0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>账号与安全</title>
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/register.css" />
    <link rel="stylesheet" href="./css/iconfont.css" />
    <script src="./js/zepto.min.js"></script>
  </head>
  <body>
    <div class="register">
      <!-- 头部 -->
      <div class="header">
        <div class="h_left">
          <span
            class="iconfont icon-jiantou-copy
                "
          ></span>
          <span>返回</span>
        </div>
        <div class="h_content">账号与安全</div>
      </div>
      <!-- 内容 -->
      <div class="content m_top10">
        <form action="" class="msg">
          <div class="ips">
            <label for="" class="nums f_left">手机号:</label>
            <div class="inputs">
              <input
                type="text"
                placeholder="您的注册手机号"
                name="tel"
                class="tel"
              />
            </div>
            <input
              type="button"
              value="获取验证码"
              name="yanzhen"
              class="yz"
              id="btn"
            />
          </div>
          <div class="ips">
            <label for="" class="nums f_left">验证码:</label>
            <div class="inputs">
              <input
                type="text"
                placeholder="您手机收到的验证码"
                name="tel"
                class="tel"
              />
            </div>
          </div>
          <div class="ips">
            <label for="" class="nums f_left">新密码:</label>
            <div class="inputs">
              <input
                type="text"
                placeholder="6-20位字母或数字"
                name="tel"
                class="tel"
              />
            </div>
          </div>
          <div class="ips">
            <label for="" class="nums f_left">重复密码:</label>
            <div class="inputs">
              <input
                type="text"
                placeholder="6-20位字母或数字"
                name="tel"
                class="tel"
              />
            </div>
          </div>
        </form>
        <!-- sure -->
        <div class="btn-sure m_top10">
          <input type="button" name="btn-sure" class="sure" value="确定" />
        </div>
      </div>
    </div>
    <script>
      $(function() {
        var flag = true;
        $("#btn").on("click", function() {
          var total = 60;
          if (flag == true) {
            flag = false;
            var timeId = setInterval(function() {
              total--;
              $("#btn").css({
                backgroundColor: "#ccc",
                color: "#eee",
                fontSize: "14px"
              });
              $("#btn").val(total + "s后重新获取");
              if (total == 0) {
                clearInterval(timeId);
                $("#btn").val("重新获取验证码");
                $("#btn").css({
                  backgroundColor: "rgb(238,238,238)",
                  color: "black",
                  fontSize: "12px"
                });
                flag = true;
              }
            }, 1000);
          }
        });
      });
    </script>
  </body>
</html>
